<template>
	<s-layout title="跟单大厅" navbar="custom" tabbar="/pages/index/index">
		<uni-view class="bgc">
			<uni-view class="navbar">
				<uni-view class="title">
					<uni-text style="font-size: 19px"><span>跟单大厅</span></uni-text>
					<uni-view class="search">
						<image style="height: 16px;width: 16px;" src='@/static/gendan/search.png'></image>
					</uni-view>
					<uni-view class="fd">
						<image style="height: 16px;width: 16px;" src='@/static/gendan/fadan.png'></image>
						<uni-text style="font-size: 14px;"><span>发单</span></uni-text>
					</uni-view>
					<uni-view class="help">
						<image style="height: 16px;width: 16px;" src='@/static/gendan/help.png'></image>
					</uni-view>
					<uni-view class="my">
						<image style="height: 16px;width: 16px;" src='@/static/gendan/youshang_person.png'></image>
					</uni-view>
				</uni-view>
			</uni-view>
			<uni-view class="topBox">
				<uni-view class="popBox"></uni-view>
			</uni-view>
			<uni-view class="topBox">
				<uni-view class="popBox"></uni-view>
				<uni-view></uni-view>
			</uni-view>
			<uni-view class="topBox">
				<uni-view class="popBox"></uni-view>
				<uni-view>
					<uni-view>
						<uni-view class="item">
							<uni-view class="left">
								<uni-text><span>一战成名</span></uni-text>
							</uni-view>
							<uni-view class="right">
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20241219/86581734575721802.jpeg"
											draggable="false" alt=""/></uni-image>
									<uni-text><span>泡茶足球</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20241021/62641729496440522.gif"
											draggable="false" alt=""/></uni-image>
									<uni-text><span>凡人修仙</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20250314/10631741956600859.jpg"
											draggable="false"/></uni-image>
									<uni-text><span>阿威玩球</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-view data-v-2aee38b6="" class="u-badge badClass u-badge--bg--error"
										style="top: 3px; right: 12px; font-size: 12px; position: absolute; color: rgb(255, 255, 255); transform: translateY(0px) translateX(0px);">
										1
									</uni-view>
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20250122/26841737491127010.jpeg"
											draggable="false"/></uni-image>
									<uni-text><span>柿子熟了</span></uni-text>
								</uni-view>
							</uni-view>
						</uni-view>
					</uni-view>
					<uni-view>
						<uni-view class="item">
							<uni-view class="left">
								<uni-text><span>命中榜</span></uni-text>
							</uni-view>
							<uni-view class="right">
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20250225/26971740458440779.jpeg"
											draggable="false"/></uni-image>
									<uni-text><span>足球中中中</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20240410/8961712731557383.jpeg"
											draggable="false"/></uni-image>
									<uni-text><span>江原坂矢</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20240409/19631712649099235.jpeg"
											draggable="false"/></uni-image>
									<uni-text><span>不眠日记</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20240409/77461712649116937.jpeg"
											draggable="false"/></uni-image>
									<uni-text><span>岁月不休</span></uni-text>
								</uni-view>
							</uni-view>
						</uni-view>
					</uni-view>
					<uni-view>
						<uni-view class="item">
							<uni-view class="left">
								<uni-text><span>盈利榜</span></uni-text>
							</uni-view>
							<uni-view class="right">
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="@/static/gendan/default_photo.jpg" draggable="false"/></uni-image>
									<uni-text><span>更衣战吼</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20250215/81561739606520982.jpg"
											draggable="false"/></uni-image>
									<uni-text><span>私底下痛</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20240411/70731712803554920.jpeg"
											draggable="false"/></uni-image>
									<uni-text><span>陈年归宿</span></uni-text>
								</uni-view>
								<uni-view class="v1" style="position: relative;">
									<uni-image>
										<image src="https://xyxhddoc.oss-cn-hangzhou.aliyuncs.com/upload/memberphoto/20250314/10631741956600859.jpg"
											draggable="false"/></uni-image>
									<uni-text><span>阿威玩球</span></uni-text>
								</uni-view>
							</uni-view>
						</uni-view>
					</uni-view>
				</uni-view>
			</uni-view>
			
			<!-- tab -->
			<su-sticky bgColor="#fff">
				<su-tabs :list="tabMaps" :scrollable="false" :current="state.currentTab" @change="onTabsChange">
				</su-tabs>
				<su-tabs :list="gameTabMaps" :scrollable="false" :current="state.gameCurrentTab" :activeStyle="{color: 'red'}"
					@change="onGameTabsChange">
				</su-tabs>
			</su-sticky>

			<uni-view class="content">
				<uni-view class="list">
					<uni-scroll-view class="u-scroll-view">
					
						<uni-view class="top">
							<uni-view class="left">
								<uni-image>
									<image src="@/static/gendan/default_photo.jpg" draggable="false" alt=""/></uni-image>
								<uni-view class="l1">
									<uni-text><span>怎么才能黑</span></uni-text>
									<uni-text
										style="color: rgb(189, 189, 190); font-size: 12px;"><span>预计回报2.9倍</span></uni-text>
								</uni-view>
							</uni-view>
							<uni-view class="right">
								<uni-view class="r1">
									<uni-text style="color: rgb(189, 189, 190);"><span>截止时间</span></uni-text>
									<uni-text style="color: rgb(255, 61, 0); font-size: 12px;"><span>04-05
											12:45</span></uni-text>
								</uni-view>
							</uni-view>
						</uni-view>
						<uni-view class="c">
							<uni-text><span>快来跟我一起中大奖吧！</span></uni-text>
						</uni-view>
						<uni-view class="foot">
							<uni-view class="left">
								<uni-view class="f1">
									<uni-text><span>竞彩足球</span></uni-text>
									<uni-text class="t1"><span>2串1</span></uni-text>
								</uni-view>
								<uni-view class="f1">
									<uni-text><span>自购</span></uni-text>
									<uni-text class="t1"><span>200元</span></uni-text>
								</uni-view>
								<uni-view class="f1">
									<uni-text><span>人气</span></uni-text>
									<uni-view>
										<p>
											<uni-text class="gdRqOut">
												<span>
													<uni-text class="t2 " style="width: 0px;">
														<span></span>
													</uni-text>
												</span>
											</uni-text>
										</p>
									</uni-view>
								</uni-view>
								<uni-view class="gd">
									<uni-view class="f2">
										<uni-text><span>跟单</span></uni-text>
									</uni-view>
								</uni-view>
							</uni-view>
						</uni-view>
					</uni-scroll-view>
				</uni-view>
			</uni-view>
		</uni-view>
	</s-layout>
</template>


<script setup>
	import sheep from '@/sheep';
	import {
		onLoad,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import _ from 'lodash-es';
	import {
		resetPagination
	} from '@/sheep/util';
	import BrokerageApi from '@/sheep/api/trade/brokerage';
	import {
		fen2yuan
	} from '../../sheep/hooks/useGoods';
  import SuTabs from '@/sheep/ui/su-tabs/su-tabs.vue';
  import SuSticky from '@/sheep/ui/su-sticky/su-sticky.vue';

	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');

	onPageScroll((e) => {
		state.scrollTop = e.scrollTop <= 100;
	});

	const state = reactive({
		totals: 0, // 累计推广订单（单）
		scrollTop: false,

		currentTab: 0,
		gameCurrentTab: 0,
		loadStatus: '',
		pagination: {
			list: [],
			total: 0,
			pageNo: 1,
			pageSize: 8,
		},
	});

	const tabMaps = [{
			name: '命中率',
			value: 0,
		},
		{
			name: '跟单人气',
			value: 1,
		},
		{
			name: '赔率',
			value: 2,
		}, {
			name: '自购金额',
			value: 3,
		}, {
			name: '我的订阅',
			value: 4,
		}
	];
	const gameTabMaps = [{
			name: '足球',
			value: 0,
		},
		{
			name: '篮球',
			value: 1, // 待结算
		},
		{
			name: '数字彩',
			value: 2, // 已结算
		}
	];
	// 切换选项卡
	function onTabsChange(e) {
		resetPagination(state.pagination);
		state.currentTab = e.index;
	}
	// 切换选项卡
	function onGameTabsChange(e) {
		resetPagination(state.pagination);
		state.gameCurrentTab = e.index;
	}

	// 获取订单列表
	async function getOrderList() {
		state.loadStatus = 'loading';
		const tab = tabMaps[state.currentTab];
		const queryParams = {
			pageSize: state.pagination.pageSize,
			pageNo: state.pagination.pageNo,
			bizType: 1, // 获得推广佣金
			status: tab.value,
		}
		if (tab.value < 0) {
			delete queryParams.status;
		}
		const {
			code,
			data
		} = await BrokerageApi.getBrokerageRecordPage(queryParams);
		if (code !== 0) {
			return;
		}
		state.pagination.list = _.concat(state.pagination.list, data.list);
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
		if (state.currentTab === 0) {
			state.totals = data.total;
		}
	}

	onLoad(() => {});

	// 加载更多
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});
</script>

<style>
	.u-scroll-view {
		width: 100%;
		white-space: nowrap;
		position: relative;
	}

	.content .list .foot .left .gd {
		width: 24%;
		display: flex;
		flex-wrap: row nowrap;
		flex-direction: column;
		align-items: center;
	}

	.content .list .foot .left .gd .f2 {
		border-radius: 7px;
		align-items: center;
		text-align: center;
		width: 60px;
		height: 30px;
		line-height: 30px;
		background-color: #ff3d00;
	}

	.content .list .foot .left .gd .f2 uni-text {
		color: #fff;
	}

	.content .list .foot .left .f1 p .gdRqOut .t2 {
		display: inline-block;
		height: 13px;
		background: url() 0 -15px repeat-x;
		background-size: 14px auto;
	}

	.content .list .foot .left .f1 p .gdRqOut {
		display: inline-block;
		text-align: left !important;
		width: 70px;
		height: 15px;
		background: url() repeat-x 0 2px;
		background-size: 14px auto;
	}

	uni-page-body {
		color: #303133;
		font-size: 14px;
	}

	.content .list {
		border-bottom: 1px solid #e5e5e5;
		padding: 10px;
	}

	.content .list .c {
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 8px;
	}

	.content .list .c uni-text {
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
	}

	.content .list .top {
		display: flex;
		justify-content: space-between;
	}

	.content .list .top .left .l1 {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
	}

	.content .list .top .left uni-image {
		width: 41px;
		height: 41px;
		border-radius: 25px;
	}

	.content .list .foot {
		margin-top: 10px;
		width: 96vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content .list .foot .left {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}

	.content .list .foot .left .f1 {
		width: 24%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.u-tab-item {
		position: relative;
		display: inline-block;
		text-align: center;
		transition-property: background-color, color;
	}

	.u-scroll-box {
		position: relative;
	}

	.uni-scroll-view,
	.uni-scroll-view-content {
		width: 100%;
		height: 100%;
	}

	.uni-scroll-view {
		position: relative;
		-webkit-overflow-scrolling: touch;
		max-height: inherit;
	}

	.u-scroll-view {
		width: 100%;
		white-space: nowrap;
		position: relative;
	}

	.item {
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		margin: 10px;
		height: 88px;
		padding: 5px 10px;
	}

	.item .left {
		width: 6%;
		display: flex;
		align-items: center;
		width: 6%;
	}

	.item .right {
		width: 94%;
		display: flex;
	}

	.item .right .v1 {
		width: 25%;
		overflow: hidden;
		padding: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		text-align: center;
	}

	.item .right uni-image {
		width: 41px;
		height: 41px;
		border: 1px solid #ff3d00;
		border-radius: 50%;
	}

	.item .right .v1 uni-text {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.navbar .title .my uni-image {
		width: 19px;
		vertical-align: middle;
	}

	.navbar .title .my {
		position: absolute;
		top: 0;
		right: 5%;
	}

	.navbar .title .help uni-image {
		width: 16px;
		vertical-align: middle;
	}

	.navbar .title .help {
		position: absolute;
		top: 0;
		left: 62%;
	}

	.navbar .title .fd uni-text {
		margin-left: 5px;
		color: #fff;
	}

	.navbar .title .fd uni-image {
		width: 16px;
		vertical-align: middle;
	}

	uni-image {
		display: inline-block;
	}

	.fd {
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		left: 5%;
	}

	uni-view,
	uni-text {
		box-sizing: border-box;
	}

	.bgc {
		width: 100vw;
		min-height: 100vh;
	}

	.navbar {
		background-color: #ff3d00;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}

	.navbar .title {
		position: relative;
		color: #fff;
		font-size: 18px;
	}

	.navbar .title .search {
		position: absolute;
		top: 0;
		right: 21%;
		height: 50px;
	}

	uni-view {
		display: block;
	}

	.navbar .title .search uni-image {
		width: 19px;
		vertical-align: middle;
	}

	uni-image {
		display: inline-block;
	}

	uni-image {
		overflow: hidden;
		position: relative;
	}

	* {
		margin: 0;
		-webkit-tap-highlight-color: transparent;
	}


	uni-image>div {
		background-image: url();
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	uni-image>div,
	uni-image>img {
		width: 100%;
		height: 100%;
	}

	* {
		margin: 0;
		-webkit-tap-highlight-color: transparent;
	}

	div {
		display: block;
		unicode-bidi: isolate;
	}
	.content {
	    background-color: #fff;
	}
</style>